<!-- 颜色选择器 -->
<template>
    <color-picker
        v-model="currentColor"
        v-bind="attrs"
        class="si-color-picker"
    />
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import ColorPicker from '@/components/color-picker'
export default defineComponent({
    name: 'SiColorPicker',
    components: {
        ColorPicker
    },
    props: {
        modelValue: {
            type: String,
            default: ''
        }
    },
    emits: [
        'update:modelValue'
    ],
    setup(props, { attrs, emit }) {
        const { modelValue } = toRefs(props)

        const currentColor = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })

        return {
            attrs,
            currentColor
        }
    }
})
</script>

<style lang="less" scoped>
.si-color-picker {
    & + .si-color-picker {
        margin-left: 12px;
    }
}
</style>